<template>
  <div class="dt-select" :style="{width:width}" ref="selectProjectUser">
    <div class="dt-select-tags" @click="focus"><!--已选成员-->
      <div class="el-select">
        <div class="el-select__tags" v-if="isMultiple"><!--多选-->
          <span>
            <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="userId in selectedUserIds" :key="userId">
              <span class="el-select__tags-text">{{getRealName(userId)}}</span>
              <i class="el-tag__close el-icon-close" @click.stop="choose(userId)"></i>
            </span>
          </span>
        </div>
        <el-input suffix-icon="el-icon-arrow-up" @focus="focus" :readonly="true" :class="{'is-reverse':isFocus,'is-wrap':isWrap}"
          :value="isMultiple?(selectedUserIds[0]?' ':''):(selectedUserIds[0]?getRealName(selectedUserIds[0]):'')"
          :placeholder="placeholder" /><!--单选-->
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <div class="el-select-dropdown el-popper" x-placement="bottom-start" v-show="isFocus">
        <div class="el-scrollbar">
          <div class="dt-select-tab" v-if="projectUserList"><!--项目成员-->
            <el-tabs v-model="activeName">
              <el-tab-pane label="项目成员" name="0">
                <!-- <el-input placeholder="请输入成员实名、手机号" v-model.trim="searchPro" size="mini">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
                </el-input> -->
                <div class="dt-select-search">
                  <input type="text" placeholder="请输入成员实名、手机号" v-model.trim="searchPro" size="mini">
                  <i class="el-icon-search" @click="search"></i>
                </div>
                <div class="dt-select-list">
                  <ul>
                    <template v-for="(item,index) in projectUserList">
                      <li :key="item.id" v-show="item.isShow">
                        <el-checkbox v-if="isMultiple" v-model="checkedList[index]" @change="getSelectIds(item.userId)"
                          :disabled="getUnChecked(index)"></el-checkbox>
                        <span @click="choose(item.userId)"><em :title="item.realName">{{item.realName}}</em><em>{{item.safePhone||'--'}}</em><em
                            :title="item.speciality">{{item.speciality|filterSpec}}</em></span>
                      </li>
                    </template>
                  </ul>
                  <div class="dt-select-null" v-if="isProNull">
                    <span>暂无数据</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="el-scrollbar__bar is-horizontal">
            <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
          </div>
          <div class="el-scrollbar__bar is-vertical">
            <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
          </div>
        </div>
        <div x-arrow="" class="popper__arrow"></div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: ['option'],
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      isFocus: false,
      activeName: '0',
      /*****prop*******/
      width: this.option.width,
      placeholder: this.option.placeholder,
      isMultiple: this.option.isMultiple,
      maxSelect: this.option.maxSelect,
      //项目人员列表
      projectUserList: [],
      //已选check列表
      checkedList: [],
      //已选ids
      selectedUserIds: [],
      /****prop********/
      searchPro: ''
    }
  },
  computed: {
    isWrap() {
      var names = this.selectedUserIds.map((item) => {
        return this.getRealName(item)
      })
      return names.join('').length > 15
    },
    isProNull() {
      return this.projectUserList.every((item) => {
        return item.isShow === false
      })
    }
  },
  filters: {
    filterSpec(val) {
      var str = ''
      if (val) {
        if (val.length > 15) {
          str = val.substring(0, 10) + '...' + val.substr(-5)
        } else {
          str = val
        }
      }
      return str
    }
  },
  methods: {
    getRealName(userId) {
      return this.projectUserList.filter((item) => {
        return item.userId === userId
      })[0].realName
    },
    focus() {
      this.isFocus = true
    },
    getUnChecked(index) {
      return this.selectedUserIds.length === this.maxSelect && !this.checkedList[index]
    },
    choose(userId) {
      if (this.isMultiple) {
        //多选
        var isExistItem = this.projectUserList.filter((item) => {
            return item.userId === userId
          })[0],
          index = this.projectUserList.indexOf(isExistItem)

        if (this.selectedUserIds.length !== this.maxSelect || this.checkedList[index]) {
          this.checkedList.splice(index, 1, !this.checkedList[index])
          this.getSelectIds(userId)
        }
      } else {
        //单选
        this.isFocus = false
        this.selectedUserIds.splice(0, 1, userId)
        this.$emit('select', '' + userId)
        //选完重置一下
        this.reset()
      }
    },
    getSelectIds(userId) {
      var index = this.selectedUserIds.indexOf(userId)
      if (index < 0) {
        this.selectedUserIds.push(userId)
      } else {
        this.selectedUserIds.splice(index, 1)
      }
      this.$emit('select', this.selectedUserIds.join())
    },
    search() {
      //项目 本地筛选
      this.projectUserList = this.projectUserList.map((item) => {
        if ((item.realName && item.realName.indexOf(this.searchPro)) > -1 || (item.safePhone && item.safePhone.indexOf(this.searchPro) > -1)) {
          item.isShow = true
        } else {
          item.isShow = false
        }
        return item
      })
    },
    reset() {
      this.activeName = '0'
      this.isFocus = false
      this.searchPro = ''
      this.projectUserList = this.projectUserList.map((item) => {
        item.isShow = true
        return item
      })
    }
  },
  watch: {
    //监听option重新赋值变化
    option: {
      handler(newVal, oldVal) {
        this.projectUserList = this.option.projectUserList.map((item) => {
          item.isShow = true
          return item
        })
        //已选check列表
        this.checkedList = this.option.projectUserList.map((item) => {
          return this.option.selectedUserList.some((element) => {
            return item.userId === element.userId
          })
        })
        //已选ids
        this.selectedUserIds = this.option.selectedUserList.map((item) => {
          return item.userId
        })
      },
      deep: true, //深度监听
      immediate: true
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      if (this.isFocus && this.$refs.selectProjectUser && !this.$refs.selectProjectUser.contains(e.target)) {
        this.reset()
      }
    })
  }
}
</script>
<style scoped>
.dt-select {
  position: relative;
  display: inline-block;
}
.dt-select .el-select {
  width: 100%;
}
.dt-select .el-input >>> .el-icon-arrow-up {
  color: #c0c4cc;
  font-size: 14px;
  transition: transform 0.3s;
  transform: rotateZ(180deg);
  cursor: pointer;
}
.dt-select .el-input.is-reverse >>> .el-icon-arrow-up {
  transform: rotate(0deg);
}
.dt-select .el-scrollbar {
  padding: 0 20px 6px;
}
.dt-select .el-popper[x-placement^='bottom'] .popper__arrow {
  left: 35px;
}
.dt-select .el-select-dropdown {
  width: 100%;
}
/* .dt-select >>> .el-input__icon {
  cursor: pointer;
}
.dt-select >>> .el-input__icon:hover {
  color: #5976ef;
} */
.dt-select-search {
  position: relative;
}
.dt-select-search input {
  padding: 0 30px 0 15px;
  border: 1px solid #dcdfe6;
  width: 451px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
}
.dt-select-search i {
  position: absolute;
  right: 12px;
  top: 13px;
  color: #c0c4cc;
  font-size: 12px;
}
.dt-select-list {
  margin-top: 8px;
  height: 260px;
  overflow: auto;
}
.dt-select-list li {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  display: flex;
  padding: 0 8px;
  border-bottom: 1px solid #e9eef7;
  font-size: 12px;
}
.dt-select-list li:hover {
  background-color: #f0f5ff;
}
.dt-select-list li .el-checkbox {
  margin-right: 8px;
}
.dt-select-list li span {
  flex: 1;
  display: flex;
}
.dt-select-list li span em:nth-child(1),
.dt-select-list li span em:nth-child(2) {
  width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dt-select-list li span em:nth-child(3) {
  flex: 1;
  text-align: right;
}
.dt-select-tab >>> .el-input--mini .el-input__inner {
  border-color: #dcdfe6 !important;
}
.dt-select-tags >>> .el-input--small.is-wrap .el-input__inner {
  height: 62px !important;
}
.dt-select-null {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>